<template>
  <div id="Headers">
    <div class="logo">
      <nuxt-link to="/" class="iconfont">&#xe622;</nuxt-link>
    </div>
    <nav class="nva-list">
      <ul>
        <li v-for="(item, index) in navList" :key="index">
          <nuxt-link v-if="!item.eventMethods" :to="item.url">{{item.name}}</nuxt-link>
          <div
            v-else
            @mouseleave="hideMenu($event)"
            @mouseenter="item.eventMethods"
            :class="{active:isActive}"
          >
            {{item.name}}
            <ul
              data-flag="yes"
              v-if="item.children"
              :style="showMenuChild ? 'height:160px' : 'height:0' "
            >
              <li v-for="(child, key) in item.children" :key="key">
                <nuxt-link :to="child.path">{{child.name}}</nuxt-link>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: "headers",
  data() {
    return {
      navList: [
        {
          name: "首页",
          url: "/"
        },
        {
          name: "提供服务",
          url: "/404",
          children: [
            { name: "数字钱包", path: "/service/numberWallet" },
            { name: "区块链交易所", path: "/service/bourse" },
            { name: "会员生态系统", path: "/service/block_vip" },
            { name: "区块链积分联盟", path: "/service/integral" }
          ],
          eventMethods: this.eventMethods
        },
        {
          name: "区块链",
          url: "/blockchain"
        },
        {
          name: "案例",
          url: "/case"
        },
        {
          name: "关于我们",
          url: "/about"
        }
      ],
      showMenuChild: false,
      isActive:false
    };
  },
  methods: {
    eventMethods() {
      this.showMenuChild = true;
    },
    hideMenu({ target }) {
      this.showMenuChild = false;
    }
  },
  watch:{
    $route(to, from) {
      to.path.split('/')[1] == 'service' ? this.isActive = true : this.isActive = false;
    }
  },
  mounted() {
    window.location.pathname.split('/')[1] == 'service' ? this.isActive = true : this.isActive = false;
  }
};
</script>

<style lang="stylus" scoped>
#Headers
  width 100%
  line-height 62px
  box-sizing border-box
  padding 0 124px
  background-color rgba(0, 0, 0, 0.4)
  display flex
  justify-content space-between
  position absolute
  z-index 2
  .nva-list
    ul
      display flex
      justify-content space-around
      li
        padding 0 15px
        position relative
        div
          color #fff
        a
          display block
          color #fff
          width 100%
          height 100%
        ul
          overflow hidden
          transform-origin left
          transition 0.5s all
          position absolute
          left 0
          top 69px
          width 150px
          display flex
          flex-direction column
          li
            line-height 40px
            background-color rgba(0, 0, 0, 0.2)
  .logo
    a
      color #fff
      font-size 35px
.active
  color #12A0DF !important
</style>
